<template>
  <div id="content">
    <div class="topSearch">
      <p><span>门店：<el-input size="small" style="width: 250px" placeholder="请输入门店名称"
                            v-model="params.shopName"></el-input></span>
      </p>
      <p><span>类型：<el-select size="small" style="width: 250px" placeholder="请选择记录类型" v-model="params.type">
        <el-option value="1" label="收入"></el-option>
        <el-option value="2" label="支出"></el-option>
      </el-select></span></p>
      <p><span>时间： <el-date-picker clearable v-model="dateValue" size='small' type="daterange"
                                   range-separator="至"
                                   start-placeholder="开始日期"
                                   end-placeholder="结束日期" @change="chooseTime">
        </el-date-picker></span></p>
      <p><span>手机：<el-input size="small" style="width: 250px" placeholder="请输入用户手机号" v-model="params.phone"></el-input></span>
      </p>
      <p>
        <el-button size="small" type="primary" @click="_search">查 询</el-button>
        <!--        <el-button size="small" type="primary">新增商品</el-button>-->
      </p>
    </div>
    <!--    <div class="compareBox" style="display: flex">-->
    <!--      <div class="p">-->
    <!--        <p>总支出</p>-->
    <!--        <p style="display: flex;align-items: center;justify-content: space-between;width: 90%"><span-->
    <!--            style="font-weight: bold">100000</span>-->
    <!--          <el-image-->
    <!--              src="https://qiniushelves.jiachuangnet.com/shelf/img/V1757923686687心-心跳.png"-->
    <!--              style="width: 20px"></el-image>-->
    <!--        </p>-->
    <!--        <p>同比上周30%</p>-->
    <!--      </div>-->
    <!--      <div class="p">-->
    <!--        <p>总收入</p>-->
    <!--        <p style="display: flex;align-items: center;justify-content: space-between;width: 90%"><span-->
    <!--            style="font-weight: bold">100000</span>-->
    <!--          <el-image-->
    <!--              src="https://qiniushelves.jiachuangnet.com/shelf/img/V1757923686687心-心跳.png"-->
    <!--              style="width: 20px"></el-image>-->
    <!--        </p>-->
    <!--        <p>同比上周30%</p>-->
    <!--      </div>-->
    <!--    </div>-->
    <div class="centerTable">
      <el-table :data="pointData" height="calc(100vh - 250px)" border stripe :cell-style="{ 'textAlign': 'center' }"
                :header-cell-style="{  'fontSize': '14px', 'background-color': '#F3F6FD', 'color': '#333333', 'textAlign': 'center' }">
        <el-table-column prop="orderId" label="ID"></el-table-column>
        <el-table-column prop="totalPrice" label="商品总价"></el-table-column>
        <el-table-column prop="pointBalance" label="使用/获得积点"></el-table-column>
        <el-table-column prop="pointPercent" label="积点占比"></el-table-column>
        <el-table-column label="类型">
          <template v-slot:default="scope">
            <el-tag v-if="scope.row.type==1">收入</el-tag>
            <el-tag v-if="scope.row.type==2">支出</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="realName" label="用户"></el-table-column>
        <el-table-column prop="orderTime" label="时间"></el-table-column>
        <el-table-column prop="source" label="来源"></el-table-column>
        <el-table-column prop="shopName" label="所属门店"></el-table-column>
        <!--        <el-table-column prop="o" label="操作">-->
        <!--          <template v-slot:default="scope">-->
        <!--            <el-link>编辑</el-link>-->
        <!--            <el-link>冻结</el-link>-->
        <!--          </template>-->
        <!--        </el-table-column>-->
      </el-table>
      <el-pagination style="padding: 20px 0;" align="center" @size-change="handleSizeChange"
                     @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[20, 30, 40, 50]"
                     layout="total, sizes, prev, pager, next, jumper" :total="totalCount">
      </el-pagination>
    </div>
  </div>
</template>
<script>
import dayjs from "dayjs";

export default {
  name: "pointsList",
  meta: {title: "积点记录", icon: "el-icon-c-scale-to-original", sort: 8},
  data() {
    return {
      currentPage: 1,
      dateValue:"",
      params: {
        pageSize: 20,
        pageNumber: 1
      },
      totalCount: 0,
      pointData: [],
    }
  },
  created() {
    this.getPointList()
  },
  methods: {
    getPointList() {
      this.$api.pcBalanceGetPCPointList(this.params).then(res => {
        this.pointData = res.data
        this.totalCount = res.total
      })
    },
    handleSizeChange(val) {
      this.params.pageSize = val
      this.getPointList()
    },
    handleCurrentChange(val) {
      this.params.pageNumber = val
      this.getPointList()
    },
    chooseTime(e) {
      this.params.startTime = dayjs(e[0]).format("YYYY-MM-DD");
      this.params.endTime = dayjs(e[1]).format("YYYY-MM-DD");
    },
    _search() {
      this.params.pageNumber = 1
      this.getPointList()
    }
  }
}
</script>

<style scoped lang="less">
.topSearch {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 10px;

  p {
    margin-right: 20px;
  }
}

.el-link {
  text-decoration: underline;
  font-size: 12px;
  margin-right: 8px;
}

.el-button {
  background-color: #303e9d;
  border: none;
}

.p {
  width: 200px;
  height: 100px;
  margin-right: 20px;
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: flex-start;
  padding-left: 15px;
  box-sizing: border-box;
  box-shadow: 2px 5px 20px #919398;

  span {
    display: inline-block;
  }
}
</style>